<template>
  <div class="zc">
    <nav-header></nav-header>
    <div class="zcNav">
      <div class="left">
        <left-menu></left-menu>
      </div>
      <div class="rightNav">
        <div class="first">
          <div class="left_cersion">
            <span>版本号:</span>
          </div>
          <div class="right">
            <template>
              <el-select v-model="value" clearable placeholder="请选择" size="mini">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </div>
          <div class="butSearch">
            <el-button @click="buttSearch" size="mini" type="primary" icon="el-icon-search">查看</el-button>
          </div>
        </div>
        <div class="second">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="project_name" label="项目名称" width="400"></el-table-column>
            <el-table-column prop="module_name" label="模块" width="500"></el-table-column>
            <!-- <el-table-column prop="version_person" label="用例维护人员姓名" width="400"></el-table-column> -->
            <el-table-column prop="case_number" label="用例数量" width="500"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <!-- <el-button type="text" size="small">编辑</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <div class="inPages">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import NavHeader from "@/components/NavHeader";
import leftMenu from "@/components/leftMenu";
import { api } from "./api/index";

export default {
  name: "lis",
  data() {
    return {
      tem_dic: {},
      options: [],
      value: "",
      total: 0,
      project_name: "",
      project_type: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: []
    };
  },
  components: {
    NavHeader,
    leftMenu
  },
  methods: {
    buttSearch() {
      let dic = {
        version_number: this.value,
        page: 1
      };

      if (this.project_type == false) {
        let res = JSON.parse(localStorage.getItem("res"));
        console.log(res);
        (dic.project_type = res.project_type),
          (dic.project_name = res.project_name);
      } else {
        (dic.project_type = this.project_type),
          (dic.project_name = this.project_name);
      }

      api({
        url: "/case/case_list",
        method: "GET",
        params: dic
      }).then(da => {
        let result = da.data;

        this.$router
          .push({
            name: "detail",
            params: {
              da: JSON.stringify(result)
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    handleClick(row) {
      let data1 = {
        project_name: row.project_name,
        module_name: row.module_name,
        project_type: 1,
        page: 1
      };

      localStorage.setItem("arg", JSON.stringify(data1));

      api({
        url: "/case/case_list",
        method: "GET",
        params: data1
      })
        .then(da => {
          let result = da.data;

          this.$router.push({
            name: "interfaceDetail",
            params: {
              da: JSON.stringify(result)
            }
          });
        })
        .catch(err => {
          console.log(err);
        });

      //   this.$router.push("/detail"); // console.log(data);
      // api({
      //   url: "/api/api/case/version-case",
      //   method: "GET",
      //   params: data
      // })
      //   .then(da => {
      //     console.log("111");
      //     console.log(da.data);
      //     // this.tableData = da.data.data;
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  mounted() {
    // 接受参数

    let res = "";
    try {
      res = this.$route.params.da;
    } catch (err) {
      console.log(err);
    }
    let llis = [];
    let paramData = {};

    if (typeof res == "undefined") {
      console.log("under");
      this.tableData = JSON.parse(localStorage.getItem("table_data"));
    } else {
      this.project_name = JSON.parse(this.$route.params.da).project_name;
      this.project_type = JSON.parse(this.$route.params.da).project_type;
      this.total = JSON.parse(this.$route.params.da).totalCount;
      let arr = JSON.parse(this.$route.params.da).data;
      arr.forEach(dda => {
        dda.project_name = this.project_name;
      });
      this.tableData = arr; //赋值给tableData
    }

    console.log(this.project_name);
    console.log(this.project_type);

    let type_name = {
      name: this.project_name,
      type: this.project_type
    };

    // localStorage.setItem("type_name", JSON.stringify(type_name));`

    var version_lis = []; // 版本号列表

    this.tableData.forEach(dd => {
      let dic = {};
      dic.label = dd.version_number;
      dic.value = dd.version_number;
      this.options.push(dic);
    });

    this.options.sort();
    this.options.reverse(); //版本号排序

    localStorage.setItem("table_data", JSON.stringify(this.tableData));

    if (!this.tableData) {
      console.log("not table");
    }
  }
};
</script>

<style lang='scss' scoped>
.zc {
  height: 100%;
}

.zcNav {
  height: calc(100% - 50px);
  display: flex;
  justify-content: flex-start;
  .rightNav {
    background: #fff;
    width: 100%;
    .first {
      height: 50px;
      background: #eee;
      line-height: 50px;
      font-weight: bold;
   
      font-size: 20px;
      padding-left: 30px;
      letter-spacing: 10px;
      display: flex;
      justify-content: flex-start;
      .left_cersion {
        span {
          font-size: 16px;
        }
      }
      .butSearch {
        margin-left: 20px;
      }
    }
    .second {
      width: 100%;
    }
    .pages {
      width: 100%;
      height: 70px;
      // line-height: 70px;
      text-align: right;
      .inPages {
        margin-top: 40px;
        height: 30px;
        margin-right: 80px;
      }
    }
  }
}
</style>    